<template>
	<view class="bg-white">
		<swiper class="swiper" circular autoplay>
			<swiper-item v-for="(item,index) in obj.images" :key='index'>
				<image class="bg" :src="item.sourceUrl+'?x-oss-process=image/resize,m_fixed,h_240,w_350'" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="margin-top flex padding">
			<text class="text-black text-bold text-xl">{{obj.hotelName}}</text>
			<text class="cu-tag bg-yellow radius">经济型</text>
		</view>
		<view class="margin-top flex padding">
			<view class="call">
				<view class="margin-bottom">
					总体评价<text class="text-yellow"><text class="text-lg">{{obj.score}}</text>分</text>
				</view>
				<view>
					<text class="cu-tag bg-orange light radius">闪电订房</text>
					<text class="cu-tag bg-orange light radius">交通方便</text>
					<text class="cu-tag bg-orange light radius">环境干净</text>
				</view>
			</view>
			<view class="text-center" @tap='call(obj.hotLine)'>
				<view><text class="iconfont icon-lianxiwomen text-yellow"></text></view>
				<text>电话</text>
			</view>
		</view>
		<view class="flex padding">
			<view v-if="type" @tap='show=true'>
				入住时间: {{time[0]}}
			</view>
			<view v-else @tap='show=true'>
				入住时间: {{time[0]}}至{{time[1]}}
			</view>
			<view>
				<view v-if="type" class="cu-tag light bg-blue radius">秒计房</view>
				<view v-else>共{{num}}晚</view>
			</view>
		</view>
		<view class="cu-card case">
			<view class="cu-item shadow no-card" v-for="(item,index) in obj.hotelRoomTypes" :key='index'>
				<view class="image">
					<u-image :height="400" :src="item.images[0].sourceUrl+'?x-oss-process=image/resize,m_fixed,h_200,w_345'">
						<u-empty text="暂无图片" mode="photo"></u-empty>
					</u-image>
					<!-- <view class="cu-tag bg-blue">史诗</view>
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> -->
				</view>
				<view>
					<view class="flex margin-top">
						<view>
							<view class="text-xl text-black">{{item.typeName}}</view>
							<view class="text-sm">
								<text v-if="type">全天价:￥{{item.secondRoomPrice}}</text>
							</view>
						</view>
						<button class="cu-btn bg-yellow light radius">
							设施/详情
						</button>
					</view>
					<view class="margin-top bottom">
						<template v-if="type">
							<view>
								<text class="text-xl margin-lr">秒计房</text>
								<text class="text-sm text-gray">剩余{{item.ableRoomNum}}间</text>
								<!-- <text @tap="modalName='Modal'" class="text-sm text-gray">计费规则<text class="cuIcon-info"></text></text> -->
							</view>
							<view>
								<text @tap="modalName='Modal'" class="text-sm text-gray">计费规则<text class="cuIcon-info"></text></text>
								<button @tap="goOrder(item.id,item.deposit,item.typeName,item.images)" v-if="item.ableRoomNum>0" class="cu-btn bg-yellow margin-lr radius xs">预订</button>
								<button v-else class="cu-btn bg-grey margin-lr radius xs">满房</button>
							</view>
						</template>
						<template v-else>
							<view>
								<text class="text-xl margin-lr">全日房</text>
								<text class="text-sm text-gray">剩余{{item.ableRoomNum}}间</text>
							</view>
							<view>
								<text class="text-sm text-orange text-price text-blod"><text class='text-xl'>{{item.lowPrice}}</text>起</text>
								<button @tap="goOrder(item.id,item.deposit,item.typeName,item.images)" v-if="item.ableRoomNum>0" class="cu-btn bg-yellow margin-lr radius xs">预订</button>
								<button v-else class="cu-btn bg-grey margin-lr radius xs">满房</button>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="padding">
			<view class="text-xl text-blod text-black margin-tb">服务与设施</view>
			<view class="flex box">
				<view>
					<view>
						<u-icon class="text-yellow" size="30" name="checkbox-mark"></u-icon>
						&nbsp;WIFI
					</view>
					<view>
						<u-icon class="text-yellow" size="30" name="checkbox-mark"></u-icon>
						&nbsp;空调
					</view>
				</view>
				<view>
					<view>
						<u-icon class="text-yellow" size="30" name="checkbox-mark"></u-icon>
						&nbsp;电视
					</view>
					<view>
						<u-icon class="text-yellow" size="30" name="checkbox-mark"></u-icon>
						&nbsp;洗漱用品
					</view>
				</view>
				<view>
					<view>
						<u-icon class="text-yellow" size="30" name="checkbox-mark"></u-icon>
						&nbsp;电吹风
					</view>
					<view>
						<u-icon class="text-yellow" size="30" name="checkbox-mark"></u-icon>
						&nbsp;智能门锁
					</view>
				</view>
			</view>
			<view class="text-xl text-blod text-black margin-tb">酒店简介</view>
			<view class="text-df box">
				{{obj.introduce}}
			</view>
			<view class="text-xl text-blod text-black margin-tb">酒店政策</view>
			<view>
				<text class="text-bold margin-right">押金</text>
				<text>线上收取押金，退房检查无损原路退回</text>
				<view class="text-bold margin-tb">退订说明</view>
				<view class="cu-timeline">
					<view class="cu-item cur cuIcon-roundcheckfill">
						<view class="content light bg-green shadow-blur">
							距离入住≥1天取消联系客服（400-878-7651）可免费取消
						</view>
					</view>
					<view class="cu-item cuIcon-roundcheckfill">
						<view class="content bg-orange light shadow-blur">
							距离入住＜1天(下午4点前)取消退还全部房费的80%
						</view>
					</view>
					<view class="cu-item text-grey cuIcon-roundcheckfill">
						<view class="content bg-orange light shadow-blur">
							入住当天取消或提前退房，退款发生后，1-3天内完成退款
						</view>
					</view>
				</view>
			</view>
		</view>
		<billingRules :modalName.sync='modalName'></billingRules>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import billingRules from '../../../component/billingRules.vue';
	import {getRoomType} from '@/api/api.js'
	export default {
		data() {
			return {
				modalName:null,
				num:null,
				scrollTop:0,
				obj:{},
				hotelId:null,
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed:{
			...mapGetters(['type','time'])
		},
		components:{
			billingRules,
		},
		onLoad(e) {
			this.initTime();
			this.hotelId=e.hotelId;
		},
		onShow() {
			this.getRoomType(this.hotelId);
		},
		methods:{
			getRoomType(hotelId){
				getRoomType({
					hotelId,
					startTime:this.time[0],
					endTime:this.time[1]
				}).then(res=>{
					this.obj=res.data;
				})
			},
			goOrder(id,deposit,typeName,images){
				uni.roomTypeImage = images;
				uni.navigateTo({
					url:"../order/order?hotelId="+this.hotelId+"&roomId="+id+"&deposit="+deposit+'&typeName='+typeName,
					fail(err) {
						console.log(err);
					}
				})
			},
			call(e){
				uni.makePhoneCall({
					phoneNumber:e
				})
				
			},
			// roomDateil(){
			// 	uni.navigateTo({
			// 		url:'../roomDetail/roomDetail'
			// 	})
			// },
			initTime(){
				if(!this.type){
					this.num = parseInt(((new Date(this.time[1]).getTime() - new Date(this.time[0]).getTime())/(1000*60*60*24)));
				}
			},
			changeTime(e){
				let time = [];
				if(this.type){
					time[0]=e.result;
				}else{
					if(e.startDate==e.endDate){
						return;
					}
					time[0]=e.startDate;
					time[1]=e.endDate;
					this.num = parseInt(((new Date(e.endDate).getTime() - new Date(e.startDate).getTime())/(1000*60*60*24)));
				}
				this.$store.dispatch('SetTime',time);
			}
		}
	}
</script>

<style lang="scss">
.swiper{
	width: 100vw;
	height: 480rpx;
	image{
		width: 100%;
	}
}
.box{
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid $u-border-color;
}
.flex{
	justify-content: space-between;
	align-items: center;
	.call{
		width: 80%;
		border-right: 1rpx solid $u-border-color;
	}
	.call+view{
		width: 18%;
	}
}
.bottom{
	height: 100rpx;
	line-height: 100rpx;
	background-color: $u-bg-color;
	display: flex;
	justify-content: space-between;
}
</style>
